<template>
    <div id="yoso">
      <el-form ref="form" :model="photo" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="photo.p_name"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <img :src="photo.p_path" width="50px">
          <el-upload ref="upload" name="photo" action="" :auto-upload="false"
                     accept=".png,.jpg,.gif" :on-change="handleChange"
                     :file-list="fileList" :http-request="httpRequest"
          >
            <el-button type="primary" size="small">点击上传</el-button>
            <span slot="tip">.png,.jpg,.gif</span>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
    export default {

        name: "HotWordAdd",
      data(){
          return{
            admin:{},
            fileList:[],
            file:[],
            photo:{
              hw_name:'',
              hw_path:''
            }
          }
      },
      methods:{
        handleChange(file){
          this.fileList.splice(0,this.fileList.length)
          this.photo.p_path=URL.createObjectURL(file.raw)
          this.fileList[0]=file;
        },
        httpRequest(param){
          this.file.push(param.file)
        },
        onSubmit(){
          var formData = new FormData();
          this.$refs.upload.submit();
          this.file.forEach(function(file){
            formData.append('photo',file,file.name);
          });
          Object.keys(this.photo).forEach(key=>{
            formData.append(key,this.photo[key])
          });
          this.$axios.post('/PhotoServlet/add',formData)
            .then(resp=>{
              this.$router.push('/lunbo/photo')
            })

        }
      }
    }
</script>

<style scoped>

</style>
